<template>
  <div class="christmas">
    <div class="christmas-item" style="--daly: 0s">在至高之处荣耀归于神</div>
    <div class="christmas-item" style="--daly: 0.5s">在地上平安归于祂所喜悦的人</div>
    <div class="christmas-item mt-2 font-bold" style="--daly: 1s">路加福音2:14</div>

    <div class="christmas-star"></div>
  </div>
</template>
<script setup lang="ts"></script>
<style scoped lang="scss">
.christmas {
  @apply text-center text-[#fef9c3] relative;

  .christmas-item {
    opacity: 0;
    animation: anim 1s ease-in-out forwards;
    animation-delay: var(--daly);
  }

  .christmas-star {
    width: 0px;
    height: 0px;
    background-color: white;
    position: absolute;
    right: 50%;
    top: 0px;
    opacity: 0;
    z-index: 99999;
    border-radius: 50%;
    // box-shadow: 0px 0px 10px 6px white;
    animation:
      star 1s ease-in-out infinite alternate-reverse,
      up 2s ease forwards,
      anim 0.5s ease forwards;
    animation-delay: 2s;

    &::after {
      content: "";
      width: 28px;
      height: 1px;
      background-color: yellow;
      display: block;
      position: absolute;
      left: -10px;
      top: 4px;
      z-index: 999;
      border-radius: 12px;
      box-shadow: 0px 0px 8px 3px yellow;
    }

    &::before {
      content: "";
      width: 1px;
      height: 34px;
      background-color: yellow;
      display: block;
      position: absolute;
      left: 4px;
      top: -8px;
      z-index: 999;
      border-radius: 12px;
      box-shadow: 0px 0px 8px 3px yellow;
    }
  }
}

@keyframes anim {
  0% {
    opacity: 0;
    transform: translateY(-10px);
  }

  100% {
    opacity: 1;
    transform: translateY(0px);
  }
}

@keyframes star {
  0% {
    box-shadow: 0px 0px 10px 6px yellow;
  }

  100% {
    box-shadow: 0px 0px 28px 10px yellow;
  }
}

@keyframes up {
  0% {
    top: 0px;
  }

  100% {
    top: -30px;
  }
}
</style>
